Vue.component('dict-select', {
    template: `
        <el-select
            v-model="svalue"
            :size="size"
            filterable
            :clearable="clearable"
            :disabled="disabled"
            :placeholder="translate(placeholder)"
            :multiple="multiple"
            :no-data-text="translate('无数据')"
            :no-match-text="translate('无数据')"
            :popper-append-to-body="false"
        >
            <el-option
              v-for="item in options"
              :key="item.dictValue"
              :label="translate(item.dictLabel)"
              :value="item.dictValue"
            />
        </el-select>
    `,
    props: {
        value: {
            type: String,
            default: ''
        },
        dictionary: {
            type: String,
            default: () => ''
        },
        label: {
            type: String,
            default: () => ''
        },
        option: {
            type: String,
            default: () => ''
        },
        size: {
            type: String,
            default: () => ''
        },
        clearable: {
            type: Boolean,
            default: true
        },
        isCheck: {
            type: Boolean,
            default: false
        },
        placeholder: {
            type: String,
            default: '请选择'
        },
        disabled: {
            type: Boolean,
            default: false
        },
        multiple: {
          type: Boolean,
          default: false,
          desc: '多选'
        }
    },
    data: function() {
        return {
            svalue: this.value,
            options: [],
            storageLanguageJson: {}
        }
    },
    watch: {
        value(newVal) {
            if (this.multiple && !Array.isArray(newVal)) {
              this.svalue = JSON.parse(newVal)
            } else {
              this.svalue = newVal
            }
        },
        svalue(newVal, oldVal) {
            if (newVal !== oldVal) {
                this.$emit('input', this.svalue)
                this.$emit('change', this.svalue)
            }
        },
        'dictionary': {
          handler(newVal, oldValue) {
            if (newVal) {
              this.init()
              if (oldValue) {
                this.value = undefined
                this.svalue = undefined
                this.$emit('input', this.svalue)
                this.$emit('change', this.svalue)
              }
            } else {
              this.options = []
              this.value = undefined
              this.svalue = undefined
              this.$emit('input', this.svalue)
              this.$emit('change', this.svalue)
            }
          },
          deep: true,
          immediate: true
        }
    },
    created() {
      if (window.localStorage['language']) {
        var localStorage = window.localStorage['language']
        this.storageLanguageJson = JSON.parse(window.localStorage['language_' + localStorage])
      }
      // console.log(storageLanguageJson)
      if (this.dictionary) {
          this.init()
      }
    },
    methods: {
      translate(key) {
        // console.log(key, this.storageLanguageJson, window.localStorage.getItem('language'))
        if (window.localStorage['language'] && window.localStorage['language'] !== 'zh_cn') {
          setTimeout(() => {
            for (var i in this.storageLanguageJson) {
              if (i === key) {
                // console.log(this.storageLanguageJson[i])
                return this.storageLanguageJson[i]
              } else {
                return key
              }
            }
          }, 1000);
        } else {
          return key
        }

      },
      init() {
        axios({
          url: window.parent.baseUrl + '/system/dict/data/dictType/' + this.dictionary,
          headers: {
            'Content-Type':'application/json;charset=utf-8',
            'Authorization': window.parent.token
          },
          method: 'get'
        }).then(res => {
          let _res = res.data
          if (_res.code === 200) {
            this.$set(this, 'options', _res.data)
            if (this.isCheck && _res.data.length > 0) {
              this.svalue = _res.data[0].dictValue
            }
          }
        })
      }
    }
})


